Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / settings / ShortcutRecorder.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center gap-2"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"flex-1 flex flex-wrap gap-1.5 p-2 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded-xl min-h-[44px]"

Te6edf3:class=Ta5d6ff"{ 'ring-2 ring-blue-500 border-blue-500': isRecording }"

Tff7b72>

Tff7b72<template Te6edf3v-if=Ta5d6ff"keys.length > 0"Tff7b72>

Tff7b72<kbd

Te6edf3v-for=Ta5d6ff"key in keys"

Te6edf3:key=Ta5d6ff"key"

Te6edf3class=Ta5d6ff"px-2 py-1 bg-gray-100 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg text-xs font-bold text-gray-600 dark:text-zinc-300 shadow-xs uppercase"

Tff7b72>

Tff7b72{{ Te6edf3formatKeyTff7b72(Te6edf3keyTff7b72) Tff7b72}}

Tff7b72</kbd>

Tff7b72</template>

Tff7b72<span v-else Te6edf3class=Ta5d6ff"text-gray-400 dark:text-zinc-500 text-sm my-auto px-1"Tff7b72>

Tff7b72{{ Te6edf3isRecording ? Ta5d6ff"Press keys..." Tff7b72: Ta5d6ff"No shortcut" Tff7b72}}

Tff7b72</span>

Tff7b72</div>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"px-4 py-2 rounded-xl font-bold transition-all shadow-xs flex items-center gap-2"

Te6edf3:class=Ta5d6ff"[

isRecording

? 'bg-blue-600 text-white hover:bg-blue-700'

: 'bg-gray-100 dark:bg-zinc-800 text-gray-700 dark:text-zinc-300 hover:bg-gray-200 dark:hover:bg-zinc-700',

]"

@Te6edf3click=Ta5d6ff"toggleRecording"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3:icon-name=Ta5d6ff"isRecording ? 'check' : 'record-circle-outline'" Te6edf3class=Ta5d6ff"size-5" Tff7b72/>

Tff7b72{{ Te6edf3isRecording ? Ta5d6ff"Done" Tff7b72: Ta5d6ff"Record" Tff7b72}}

Tff7b72</button>

Tff7b72<button

Te6edf3v-if=Ta5d6ff"keys.length > 0 && !isRecording"

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all"

Te6edf3title=Ta5d6ff"Clear Shortcut"

@Te6edf3click=Ta5d6ff"clearShortcut"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"trash-can-outline" Te6edf3class=Ta5d6ff"size-5" Tff7b72/>

Tff7b72</button>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../MaterialDesignIcon.vue";

import KeyboardShortcuts from "../../js/KeyboardShortcuts";

export default {

name: "ShortcutRecorder",

components: { MaterialDesignIcon },

props: {

modelValue: {

type: Array,

default: () => [],

},

action: {

type: String,

required: true,

},

},

emits: ["update:modelValue", "save", "delete"],

data() {

return {

isRecording: false,

keys: [...this.modelValue],

};

},

watch: {

modelValue(newVal) {

this.keys = [...newVal];

},

},

methods: {

formatKey(key) {

if (key === "control") return "Ctrl";

if (key === "alt") return "Alt";

if (key === "shift") return "Shift";

if (key === "meta") return "⌘";

if (key === " ") return "Space";

return key;

},

toggleRecording() {

if (this.isRecording) {

this.stopRecording();

} else {

this.startRecording();

}

},

startRecording() {

this.isRecording = true;

this.keys = [];

KeyboardShortcuts.startRecording((keys) => {

this.keys = keys;

});

},

stopRecording() {

this.isRecording = false;

KeyboardShortcuts.stopRecording();

this.$emit("update:modelValue", this.keys);

this.$emit("save", this.keys);

},

clearShortcut() {

this.keys = [];

this.$emit("update:modelValue", []);

this.$emit("delete");

},

},

};

Tff7b72</script>